<template>
  <view>
    <view class="overview-wrap" :style="balanceBg">
      <view class="balance-wrap">
        <view class="flex-between">
          <view class="text">账户余额</view>
          <view>
            <button
              type="default"
              class="text-color-common-self"
              @click="accountDetails"
            >
              账户明细
            </button>
          </view>
        </view>
        <view class="value">￥{{ money || '0.00' }}</view>
      </view>
    </view>
    <view>
      <view class="list-wrap font-15">
        <view class="list-cell list-cell-arrow" @click="handleToTransaction">
          <view class="menu-item-box">
            <image :src="transRecords" class="iconfont menu-item-icon"></image>
            <view>交易记录</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import config from '@/config';
export default {
  data() {
    return {
      money: '0.00'
    };
  },
  computed: {
    balanceBg() {
      if (this.$store.state.user.curTypeColor == '#D22C2C') {
        return `background: url(${config.baseImgUrl}/balance-red-bg.png) no-repeat;background-size: cover;`;
      } else {
        return `background: url(${config.baseImgUrl}/balance-bg.png) no-repeat;background-size: cover;`;
      }
    },
    transRecords() {
      return config.baseImgUrl + '/trans-records-icon.png';
    }
  },
  onLoad(option) {
    this.money = option.money;
  },
  methods: {
    accountDetails() {
      this.$tab.navigateTo('/packageA/pages/my-wallet/accountDetails');
    },
    handleToTransaction() {
      this.$tab.navigateTo('/packageA/pages/my-wallet/transactions');
    }
  }
};
</script>
<style lang="scss" scoped>
.overview-wrap {
  padding: 35.56rpx;
  margin: 35.56rpx 24.89rpx;
  border-radius: 14.22rpx;
  button[type='default'] {
    height: 58.67rpx !important;
    padding: 0 30rpx !important;
    line-height: 58.67rpx !important;
    border-radius: 23px !important;
    background-color: #fff !important;
    box-shadow: 0px 3px 4px 0px rgba(8, 46, 181, 0.3) !important;
  }
  .balance-wrap {
    color: #ffffff;
    .text {
      font-size: 30rpx;
    }
    .value {
      font-size: 67.56rpx;
      font-weight: 700;
    }
    > view {
      line-height: 90rpx;
    }
  }
}

.list-wrap {
  margin: 15px;
  background: #fff;
  border-radius: 20rpx;
  .menu-item-box {
    display: flex;
    align-items: center;
    .menu-item-icon {
      width: 39.11rpx;
      height: 39.11rpx;
      margin: -2px 4px 0 0;
    }
  }
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
